<template>
  <!-- 位于顶部内容区域的切换箭头的小封装，偏业务 -->
  <div>
      <div :class="getPrevClass()" slot="button-prev" @click="handlePrev()">
        <span class="icon--link">
          <i class="icon icon__prev"></i>
        </span>
      </div>
    <div :class="getNextClass()" slot="button-next" @click="handleNext()">
      <span class="icon--link">
        <i class="icon icon__next"></i>
      </span>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    props: {
      onPrev: {
        type: Function
      },
      onNext: {
        type: Function
      },
      prevClass: {
        type: String,
        default: ''
      },
      nextClass: {
        type: String,
        default: ''
      }
    },
    methods: {
      getPrevClass() {
        const { prevClass } = this

        return this.addClass({
          'swiper-operate': true,
          'swiper-operate__prev': true
        }, prevClass)
      },
      getNextClass() {
        const { nextClass } = this

        return this.addClass({
          'swiper-operate': true,
          'swiper-operate__next': true
        }, nextClass)
      },
      addClass(source, clazz) {
        // 必须空格
        let clazzArr = clazz.split(' ')

        if(!$.isArray(clazzArr)) {
          clazzArr = [clazzArr]
        }

        clazzArr.forEach(p => {
          source[p] = true
        })

        return source;
      },
      handlePrev() {
        this.onPrev()
      },
      handleNext() {
        this.onNext()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .swiper-operate {
    .icon--link {
      cursor: pointer;
      display: block;
      width: 40px;
      padding: 10px 0;
    }
    .icon {
      display: block;
      width: 40px;
      height: 20px;
      background: url("../assets/arts/arts_slide_1_pointer.png") 0 0 no-repeat;
    }
    .icon__next {
      background-position: 0 -20px;
    }
  }

  .swiper--art-operate {
    position: absolute;
    top: 50%;
    margin-top: -40px;
  }

  .swiper--art-operate__prev {
    left: -60px;
  }

  .swiper--art-operate__next {
    right: -60px;
  }

  .swiper--teach-operate,
  .swiper--major-operate {
    float: left;
    &:first-child {
      margin-right: 36px;
    }
  }

  .swiper--live-operate {
    float: left;
    &:first-child {
      margin-right: 30px;
    }
  }
</style>
